<template>
	<view class="content">
		<!-- 	<codeElfGuide></codeElfGuide> -->
		<!-- 无网络提示 -->
		<!-- <code-elf-guide v-if="guidePages"></code-elf-guide> -->
		<u-no-network></u-no-network>
		<view class="user-bg">
			<view class="u-flex user-box u-p-l-40 u-p-r-30 u-p-b-30" style="margin-top: 70rpx;">
				<view class="u-m-r-10">
					<u-avatar :src="headImg" size="80" :fade="true" duration="450" :lazy-load="true"></u-avatar>
				</view>
				<view class="u-flex-1 __font">
					<view class="u-font-14">您好,</view>
					<view class="u-font-14">欢迎来到美蜂互联网医院</view>
				</view>
				<view class="u-m-l-10 u-p-10" @click="openinfo('/pages/order/infoContent/infoContent')">
					<image src="../../../static/icon/infoicon.png" style="width: 25rpx;height: 25rpx;" mode=""></image>
				</view>
			</view>
			<!-- 块1 -->
			<view class="__font u-padding-left-26 u-padding-right-26 u-margin-top-26 u-margin-bottom-26">
				<view class="">
					<image src="../../../static/index/wdzsicon.png" style="width: 26rpx;height: 26rpx;"
						class="u-m-r-10"></image> 我的诊室
					<view class="" style="float: right;font-weight: 400;"
						@click="go('/pages/setting/stateSetting/stateSetting')">
						<image src="../../../static/index/ztszicon.png" style="width: 26rpx;height: 26rpx;"
							class="u-m-r-10"></image> 状态设置
					</view>
				</view>
			</view>


			<!-- 线上 线下 回复列表 -->

			<view class="u-flex u-padding-left-26 u-padding-right-26 u-margin-top-26 u-margin-bottom-26">
				<view class="u-flex-1 u-padding-10 bgView" @click="go('/pages/order/lineOn/lineOn')"
					style="background: url(../../../static/index/dyjz.png);background-size: 100% 100%;">
					<p class="u-font-12">线上问诊</p>
					<br>
					<span>{{numbers.line_on}} <span class="u-font-10">待接单</span> </span>
				</view>
				<view class="u-flex-1 u-margin-left-26 u-margin-right-26 u-padding-10 bgView"
					@click="go('/pages/order/lineOff/lineOff')"
					style="background: url(../../../static/index/dyjz.png);background-size: 100% 100%;">
					<p class="u-font-12">到院就诊</p>
					<br>
					<span>{{numbers.line_off}}</span>
				</view>
				<view class="u-flex-1 u-padding-10 bgView" @click="go('/pages/order/waitForReply/waitForReply')"
					style="background: url(../../../static/index/dhf.png);background-size: 100% 100%;">
					<p class="u-font-12">待回复</p>
					<br>
					<span>{{numbers.reply}}</span>
				</view>
			</view>

			<!-- 资质认证 -->
			<view class="u-flex u-margin-top-26 u-margin-bottom-26">
				<view class="u-flex-1 u-margin-left-26 u-margin-right-26 u-padding-10 bgView"
					@click="openinfo('/pages/qualification/qualification1/qualification1')">

					<view
						style="background: url(../../../static/index/zzrz.png);background-size: 100% 100%;height: 120rpx;">
					</view>
				</view>
			</view>

			<!-- 预约表 -->
			<view class="u-padding-left-26 u-padding-right-26 u-margin-top-40 u-margin-bottom-26 bgView"
				style="border-radius: 15rpx;position: relative;top: -20rpx;"
				@click="openinfo('/pages/order/makeTable/makeTable?timeTemp='+timeTemp)">
				<h5 class="content-color title_head u-p-t-26" style="display: inline-block;">近期预约表</h5>
				<p class="" style="font-size: 20rpx;float: right;line-height: 80rpx;color: #b1b1b1;">查看全部 ></p>
				<view class="u-m-t-20 u-m-b-20">
					<view class="reservationTable" style="width: 14%;display: inline-block;"
						v-for="(item,index) in weekText" :key="index">
						{{item}}
					</view>
				</view>
				<view class="">
					<view class="reservationTable u-m-t-20 u-m-b-20" style="width: 14%;display: inline-block;"
						v-for="(item,index) in day" :key="index">
						<p v-show="item!=getDate">
							{{item}}
						</p>
						<p v-show="item==getDate">
							<text
								style="background-color: #0a7fff;color: #FFFFFF;border-radius: 50%;width: 40rpx;display: inline-block;">今</text>
						</p>
						<p v-show="true" class="make">无预约</p>
						<p v-show="false" class="make" style="color: #0a7fff;">有预约</p>
					</view>
				</view>
			</view>


			<view class="u-flex u-margin-top-26 u-margin-bottom-26">
				<view class="u-flex-1 u-margin-left-26 u-margin-right-26 u-padding-10 bgView"
					@click="openinfo('/pages/TheHospitalIn/TheHospitalIn')">
					<!-- 入驻美蜂互联网医院 -->
					<view
						style="background: url(../../../static/index/yyrz.png);background-size: 100% 100%;height: 220rpx;">
					</view>
				</view>
			</view>

			<!-- 操作手册文档 -->
			<view class="u-padding-left-26 u-padding-right-26 bgView">
				<h5 class="content-color title_head u-p-t-26">操作手册文档</h5>
				<view class="u-tabs-box u-m-b-20">
					<u-tabs-swiper activeColor="#44a3ff" ref="tabs" :list="list" :current="current" @change="change"
						:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item style="">
						<!-- 文档列表 -->
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="u-flex" v-for="(item,index) in listcontent1" :key="index">
								<view class="u-flex-1 u-margin-right-26"
									@click="openinfo('/pages/TheHospitalIn/The article details?id='+item.id)">
									<image :src="url+item.image" style="width: 100%;height: 200rpx;border-radius: 5px;">
									</image>
									<p>{{item.title}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
								<view class="u-flex-1">
									<image src=".../../../static/index/c2.png"
										style="width: 100%;height: 200rpx;border-radius: 5px;"></image>
									<p>{{item.name}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="u-flex" v-for="(item,index) in listcontent2" :key="index">
								<view class="u-flex-1 u-margin-right-26"
									@click="openinfo('/pages/TheHospitalIn/The article details?id='+item.id)">
									<image :src="url+item.image" style="width: 100%;height: 200rpx;border-radius: 5px;">
									</image>
									<p>{{item.title}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
								<view class="u-flex-1">
									<image src=".../../../static/index/c2.png"
										style="width: 100%;height: 200rpx;border-radius: 5px;"></image>
									<p>{{item.name}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="" style="display: inline-block;width: 50%;"
								v-for="(item,index) in listcontent3" :key="index">
								<view class=" u-margin-right-26"
									@click="openinfo('/pages/TheHospitalIn/The article details?id='+item.id)">
									<image :src="url+item.image" style="width: 100%;height: 200rpx;border-radius: 5px;">
									</image>
									<p>{{item.title}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="u-flex" v-for="(item,index) in listcontent4" :key="index">
								<view class="u-flex-1 u-margin-right-26"
									@click="openinfo('/pages/TheHospitalIn/The article details?id='+item.id)">
									<image :src="url+item.image" style="width: 100%;height: 200rpx;border-radius: 5px;">
									</image>
									<p>{{item.title}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
								<view class="u-flex-1">
									<image src=".../../../static/index/c2.png"
										style="width: 100%;height: 200rpx;border-radius: 5px;"></image>
									<p>{{item.name}}</p>
									<p class="text">
										{{item.adress}}
										<span style="float: right;">
											<u-icon name="eye" class="u-m-r-10"></u-icon>{{item.numbers}}
										</span>
									</p>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import searchNavbar from '@/components/search-navbar.vue';
	import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue';

	export default {
		components: {
			searchNavbar
		},
		onShow() {
			// 检测用户是否登录
			console.log("token:" + uni.getStorageSync('token'));
			// if (uni.getStorageSync('token') == '') {
			// 	uni.showToast({
			// 		title: "请登录后操作"
			// 	})
			// }

			this.getlistcontent(1); // 获取文档列表
			this.getAppointmentlist(); // 获取14天预约表信息
		},
		data() {
			return {
				url: 'http://www.seoutr.com',
				list: [{
					name: '新手必修'
				}, {
					name: '问诊案例'
				}, {
					name: '优秀案例',
				}, {
					name: '平台规范',
				}],
				weekText: ["日", "一", "二", "三", "四", "五", "六"],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				// 头像
				headImg: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3918800978,3848407993&fm=26&gp=0.jpg',
				current: 0,
				numbers: {
					line_on: 0,
					line_off: 0,
					reply: 0
				},
				timestamp: 86000,
				search: '请输入医院名称',
				listcontent1: [],
				listcontent2: [],
				listcontent3: [],
				listcontent4: [],

				// 近14天预约表
				day14: [],
				// 日期
				day: [],
				// 今日日期
				getDate: '',
				timeTemp: ''
			}
		},
		onLoad() {
			console.log('onLoad')
			this.checkNetwork();
			console.log(this.$u.os());
		},
		methods: {
			// 获取14天预约表
			getAppointmentlist() {
				this.$apiVipCentre.appointmentlist({}).then((res) => {
					console.log("14天预约表: ", res.data.data);
					this.day14 = res.data.data;
					// 解析json 拿到key值
					this.day = Object.keys(this.day14);
					this.day = this.day.sort();
					console.log("this.day: ", this.day);
					// 获取今天的日期
					const day = new Date();
					this.getDate = day.getDate();
					this.timeTemp = res.data.time;
					console.log(Object.keys(this.day14));
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// 获取分类列表
			getlistcontent(index) {
				this.$apiBasics.listcontent({
					limit: '',
					page: '',
					manual_id: index // 分类ID
				}).then((res) => {
					console.log("res.data.data: ", res.data.data);
					if (index == 1) {
						this.listcontent1 = res.data.data.items;
						console.log("this.listcontent: ", this.listcontent1);
					} else if (index == 2) {
						this.listcontent2 = res.data.data.items;
						console.log("this.listcontent: ", this.listcontent2);
					} else if (index == 3) {
						this.listcontent3 = res.data.data.items;
						console.log("this.listcontent: ", this.listcontent3);
					} else if (index == 4) {
						this.listcontent4 = res.data.data.items;
						console.log("this.listcontent: ", this.listcontent4);
					}


				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// tab栏切换
			change(index) {
				console.debug(index);
				this.swiperCurrent = index;

				this.getlistcontent(index + 1);

				// this.$apiBasics.listcontent({
				// 	limit: '',
				// 	page: '',
				// 	manual_id: index + 1 // 分类ID
				// }).then((res) => {
				// 	console.log("res.data.data: ", res.data.data);
				// 	this.listcontent = res.data.data.items;
				// }).catch((err) => {
				// 	console.log('request fail', err);
				// })
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			checkNetwork() {
				this.fun.checkNetwork()
				console.log(this.fun.networkType)
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			go(url) {
				this.$u.route({
					url: url,
					params: {}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page,
	.main {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title_head {
			font-size: 24rpx;
			font-weight: 700;
			color: #000000;
		}

		.bgView {
			background-color: #FFFFFF;
			border-radius: 10rpx;
		}

		.bgView>p {
			color: #3b97ff;
		}

		.bgView>span {
			color: #3b97ff;
		}

		.__font {
			color: #FFFFFF;
			font-weight: 700;
		}

		.text {
			color: #9d9d9d;
			font-size: 22rpx;
		}

		.title {
			font-size: 28rpx;
			color: $u-content-color;
		}

		.user-bg {
			background-color: #3f9eff;
			width: 100vw;
			height: 630rpx;
		}

		.wrap {
			padding: 30rpx;
			width: 100%;
		}

		.category {
			padding: 0 30rpx;
			border: 1upx solid #FDF6EC;
			border-left: none;
			border-right: none;
			margin-bottom: 10upx;
		}

		.category-img {
			width: 55rpx;
			height: 55rpx;
			margin-bottom: 5rpx;
		}

		.adv {
			margin: 10rpx 0;
			width: 90%;
		}

		.reservationTable {
			font-size: 28rpx;
			color: #a6a5a5;
			text-align: center;
		}

		.make {
			font-size: 18rpx;
			text-align: center;
		}

	}
</style>
